import React, { useState } from 'react'
import { NavBar, Button, List, InfiniteScroll, Image } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'

type Props = {}

interface ListItemType {
	"title": string,
	'url': string,
	'id': number,
	'key': string,
	'desc': string
}

const Index = (props: Props) => {
	const navagate = useNavigate()
	const [list, setList] = useState<ListItemType[]>([]);
	const [pageCode, setPageCode] = useState(1)
	const [pageSize, setPageSize] = useState(20)
	const [hasMore, setHasMore] = useState(true)
	const getList = async () => {
		const resp = await axios.get('/api/list', { params: { pageCode, pageSize } })
		const { code, data, mess } = resp.data
		if (code === 200) {
			setList([...list, ...data]);
			setPageCode(pageCode + 1)
		} else {
			setHasMore(false)
		}

	}
	return (
		<div>
			<NavBar right={
				<div>
					<Button onClick={() => navagate('/tags')}>标签</Button>
					<Button onClick={() => navagate('/sign')}>签到</Button>
				</div>
			}
				backArrow={false}>
				首页
			</NavBar>
			<List>
				{list.map((item, index) => (
					<List.Item key={index} prefix={<Image lazy src={item.url}></Image>} description={item.desc}>{item.title}</List.Item>
				))}
			</List>
			<InfiniteScroll loadMore={getList} hasMore={hasMore} />
		</div>
	)
}

export default Index